<template>
  <div
    :class="{
      'date-picker-wrapper-horizontal': flexDirection === 'horizontal',
      'date-picker-wrapper-vertical': flexDirection === 'vertical',
    }"
  >
    <el-date-picker
      v-model="startTime"
      placeholder="请选择开始日期"
      :picker-options="startTimePickerOptions"
      @change="handleDatePickerChange"
      :class="calcPickerClass('start')"
      size="small"
    />
    <el-date-picker
      v-model="endTime"
      placeholder="请选择结束日期"
      :picker-options="endTimePickerOptions"
      @change="handleDatePickerChange"
      :class="calcPickerClass('end')"
      size="small"
    />
  </div>
</template>
<script>
export default {
  name: 'RangeDatePicker',
  props: {
    flexDirection: {
      type: String,
      default: 'horizontal',
    },
    // pickerClass: {
    //   type: String,
    //   default: ''
    // }
  },
  watch: {
    startTime(val) {
      let disabledFunc = () => {}
      if (val && val !== '') {
        disabledFunc = (time) => {
          return val.getTime() > time.getTime()
        }
      }
      this.$set(this.endTimePickerOptions, 'disabledDate', disabledFunc)
    },
    endTime(val) {
      let disabledFunc = () => {}
      if (val && val !== '') {
        disabledFunc = (time) => {
          return val.getTime() < time.getTime()
        }
      }
      this.$set(this.startTimePickerOptions, 'disabledDate', disabledFunc)
    },
  },
  data() {
    return {
      startTime: '',
      endTime: '',
      startTimePickerOptions: {},
      endTimePickerOptions: {},
    }
  },
  methods: {
    calcPickerClass(pickerPos) {
      let str = 'date-picker-base'

      console.log(this)
      switch (pickerPos) {
        case 'start':
          if (this.flexDirection === 'vertical')
            str += ' vertical-start-date__picker'
          if (this.flexDirection === 'horizontal')
            str += ' horizontal-start-date__picker'
          break
        case 'end':
          break
        default:
          break
      }

      // if (this.pickerClass && this.pickerClass !== '') str += ` ${this.pickerClass}`

      return str
    },
    handleDatePickerChange() {
      console.log(this.startTime, this.endTime)
      if (!this.startTime) this.startTime = ''
      if (!this.endTime) this.endTime = ''
      this.$emit('picker-change', [this.startTime, this.endTime])
    },
  },
}
</script>
<style lang="scss" scoped>
.date-picker-wrapper-horizital {
  display: flex;
}

.date-picker-wrapper-vertical {
  display: flex;
  flex-direction: column;
}

.date-picker-base {
  width: 160px;
}

.vertical-start-date__picker {
  margin-bottom: 15px;
}

.horizontal-start-date__picker {
  margin-right: 25px;
}

.end-date__picker {
  width: 160px;
}
</style>
